import { defineComponent, PropType, useAttrs } from 'vue'
import { MenuItem } from './types'
import { toLine } from '../../../utils';
import * as Icons from '@element-plus/icons'
import './styles/index.scss'

export default defineComponent({
    props: {
        data: {
            type: Array as PropType<MenuItem[]>,
            required: true,
        },
        //   默认选中
        defaultActive: {
            type: String,
            default: ''
        },
        //   是否是路由模式
        router: {
            type: Boolean,
            default: false
        },
        name: {
            type: String,
            default: "name",
        },
        // 菜单标识的键名
        index: {
            type: String,
            default: "index",
        },
        // 菜单图标的键名
        icon: {
            type: String,
            default: "icon",
        },
        // 菜单子菜单的键名
        children: {
            type: String,
            default: "children",
        },
    },
    setup(props, ctx) {
        // 封装渲染无限层级菜单
        let renderMenu = (data: any[]) => {
            return data.map((item: any) => {
                // 每个菜单的图标
                item.i = (Icons as any)[item[props.icon!]]
                console.log('Icons',(Icons as any))
                console.log('Icons', props.icon)
                console.log('item',  item)
                console.log('item[props.icon!]',item[props.icon!])
                console.log('item[props.icon!]',item[props.icon!])
                // item.i = `el-icon-${toLine(item[props.icon!])}`
                // 处理sub-menu的插槽
                let slots = {
                    title: () => {
                        return <>
                            <item.i />
                            <span>{item[props.name]}</span>
                        </>
                    }
                }
                // 递归渲染children
                if (item[props.children!] && item[props.children!].length) {
                    return (
                        <el-sub-menu index={item[props.index]} v-slots={slots}>
                            {renderMenu(item[props.children!])}
                        </el-sub-menu>
                    )
                }
                // 正常渲染普通的菜单
                return (
                    <el-menu-item index={item[props.index]}>
                        <item.i />
                        <span>{item[props.name]}</span>
                    </el-menu-item>
                )
            })
        }
        let attrs = useAttrs()
        return () => {
            return (
                <el-menu
                    class="menu-icon-svg"
                    default-active={props.defaultActive}
                    router={props.router}
                    {...attrs}
                >
                    {renderMenu(props.data)}
                </el-menu>
            )
        }
    }
})